<template>
    <div class="app ">
        <div class="list">
            <div class="list_title" >
                <block v-for="(item,index) in catelist" :key="index">
                    <text class="title":class="item.id ==id?'activate':''" @click="chengcate(item.id)">{{item.name}}</text>
                </block>
            </div>
        </div>

        <div class='oplist'>
            <div class="op" :class="sort==0?'activate':''" @click="chengtab(0)">综合</div>
            <div class="op" :class="sort==1?'activate':''" @click="chengtab(1)">销量</div>
            <div class="op" :class="sort==2?'activate':''" @click="chengtab(2)">价格</div>
        </div>

        <div class="main">
            <block v-for="(item,index) in goodslist" :key="index">
                <a :href="'/pages/shop/detail/main?goods_id='+item.id" class="goods" >
                    <div class="box">
                        <div class="image">
                            <img :src="resurl+item.pic+'?x-oss-process=image/resize,m_fill,w_750,h_300'" class="pic">
                        </div>
                        <div class="info">
                            <div class="name">{{item.name}}</div>
                            <div class="price">￥{{item.price}}</div>
                        </div>
                    </div>
                </a>
            </block>
        </div>
    </div>
</template>

<script>
    var that = null;
    export default {
        data() {
            return this.datainit({
                goodslist:[],
                catelist:[],
                id:1,
                sort:0
            })
        },
        onShow() {
            that = this;
            that.check()
        },

        methods: {
            init() {
                that.goods_list();
                that.cate_list();

            },
            goods_list:function(){
                that.$post("shop/goods/lists",{cate_id:that.id,sort:that.sort},function(list){
                    that.goodslist = list;
                })
            },
            cate_list:function(){
                that.$post("shop/cate/lists",null,function(list){
                    that.catelist = list
                })
            },
            chengtab:function(_sort){
                that.sort = _sort
                that.goods_list()
            },
            chengcate:function(_id){
                that.id = _id
                that.goods_list()
            }
        }
    }
</script>

<style scoped lang="less">
    .list{
        width: 100%;
        .list_title{
            width:100%;
            height:40px;
            line-height: 40px;
            position:relative;
            border-bottom: 1px solid #ccc;
            background: #fff;
            .title{
                margin-left: 15px;
            }
            .activate{
                background: #ff6600;
                color: #fff;
                padding: 5px;
                border-radius: 10px;
            }
        }
    }
    .oplist{
        width: 100%;
        display: flex;
        text-align: center;
        background: #fff;
        border-bottom: 1px solid #ccc;
        height: 30px;
        line-height: 30px;
        .op{
            flex: 1;
        }
        .activate{
            color: #ff6600;
        }
    }
    .main{
        position: relative;
        height: 400px;
        background: #fff;
        .goods{
            position: relative;
            width: calc(50% - 6px);
            margin-left: 3px;
            margin-right:3px;
            margin-top: 3px;
            margin-bottom: 3px;
            background-color: #fff;
            overflow: hidden;
            float: left;
            border-radius: 5px;
            .box{
                position: relative;
                width: 175px;
                overflow: hidden;
                margin: auto;
                    .pic{
                        width: 100%;
                        height: 130px;
                    }

                .info{
                    .name{
                        position: relative;
                        height: 20px;
                        line-height: 20px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    .price{
                        color: #ff6600;
                    }
                }
            }
        }
    }
</style>

